<template>
  <el-card>
    <SearchForm @updateConditions="updateConditions" @onShowAdd="onShowEdit({})" />
    <Rtable :columns="columns" :url="url" :conditions="conditions" :size="17" />
    <EditDs
      :modal-data="modalData"
      :conditions.sync="conditions"
      :visible.sync="modalKeys.edit"
      @updateConditions="updateConditions"
    />
  </el-card>
</template>

<script>
import Rtable from '@/components/r-table'
import url from '@/api/url'
import { datasourceDel } from '@/api/sysMg'
import SearchForm from './components/SearchForm'
import EditDs from './components/editDs'

export default {
  components: {
    Rtable,
    SearchForm,
    EditDs
  },
  data() {
    return {
      modalKeys: {
        edit: false
      },
      modalData: {},
      url: url.datasourcePage,
      conditions: {}
    }
  },
  computed: {
    columns() {
      return [
        {
          label: this.$t('dataSource.title'),
          prop: 'title'
        },
        {
          label: this.$t('dataSource.userName'),
          prop: 'userName'
        },
        {
          label: this.$t('dataSource.type'),
          prop: 'type', // （0:本地；1:远程）
          formatter: (row, index, v) => (v ? this.$t('dataSource.remote') : this.$t('dataSource.local'))
        },
        {
          label: this.$t('dataSource.dataVersion'),
          prop: 'dataVersion'
        },
        {
          label: this.$t('dataSource.dbName'),
          prop: 'dbName'
        },
        {
          label: this.$t('dataSource.dbType'),
          prop: 'dbType'
        },
        {
          label: 'IP',
          prop: 'ip'
        },
        {
          label: this.$t('dataSource.port'),
          prop: 'port'
        },
        {
          label: this.$t('dataSource.param'),
          prop: 'param'
        },
        {
          label: this.$t('dataSource.password'),
          prop: 'password'
        },
        {
          label: this.$t('dataSource.remark'),
          prop: 'remark'
        },
        // {
        //   label: this.$t('dataSource.createdDate'),
        //   prop: 'createdDate'
        // },
        // {
        //   label: this.$t('dataSource.createdBy'),
        //   prop: 'createdBy'
        // },
        // {
        //   label: this.$t('dataSource.updatedDate'),
        //   prop: 'updatedDate'
        // },
        // {
        //   label: this.$t('dataSource.updatedBy'),
        //   prop: 'updatedBy'
        // },
        {
          label: this.$t('dataSource.operation'),
          width: 150,
          operates: [
            {
              el: 'button',
              text: this.$t('dataSource.onEdit'),
              opEvent: this.onShowEdit
            },
            {
              el: 'popconfirm',
              text: this.$t('dataSource.onDel'),
              opEvent: this.onDel,
              props: {
                title: this.$t('dataSource.affirm')
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    onShowEdit(row) {
      this.modalKeys.edit = true
      this.modalData = row
    },
    updateConditions(c = {}) {
      this.conditions = Object.assign({}, this.conditions, c)
    },
    async onDel(row) {
      const { id } = row || {}
      if (!id) {
        return
      }
      const { success } = await datasourceDel([id])
      if (success) {
        this.conditions = Object.assign({}, this.conditions)
      }
    }
  }
}
</script>

<style></style>
